<section class="content-section-column">
  <lv-radio-group lvGroupName="timelineMode" [(ngModel)]="mode">
    <lv-group lvGutter="16px">
      <lv-radio lvValue="left">Left</lv-radio>
      <lv-radio lvValue="right">Right</lv-radio>
      <lv-radio lvValue="alternate">Alternate</lv-radio>
    </lv-group>
  </lv-radio-group>

  <lv-timeline [lvMode]="mode">
    <ng-container *ngFor="let item of data; let i = index">
      <lv-timeline-item [lvTime]="item.time" *ngIf="!item.dot" [lvType]="item.type">{{ item.content }}</lv-timeline-item>
      <lv-timeline-item [lvTime]="item.time" *ngIf="item.dot" [lvDot]="errorTel">
        <p *ngFor="let info of item.content.list" style="color: #c63939">{{ info }}</p>
      </lv-timeline-item>
    </ng-container>
  </lv-timeline>

  <hr>
  <h3>平铺展示，由于布局差异较大，不能动态切换其他展示模式</h3>
  <lv-timeline lvMode="tiled">
    <ng-container *ngFor="let item of data; let i = index">
      <lv-timeline-item [lvTime]="item.time" *ngIf="!item.dot" [lvType]="item.type">{{ item.content }}</lv-timeline-item>
      <lv-timeline-item [lvTime]="item.time" *ngIf="item.dot" [lvDot]="errorTel">
        <p *ngFor="let info of item.content.list" style="color: #c63939">{{ info }}</p>
      </lv-timeline-item>
    </ng-container>
  </lv-timeline>
</section>

<ng-template #errorTel>
  <i lv-icon lv-icon="lv-icon-status-failed"></i>
</ng-template>
